<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DAY TWENTY-TWO</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="frame">
        <div class="center">
            <div class="headline">
                <div class="small">your daily</div>
                progress
            </div>
            <div class="circle-big">
                <div class="text">
                    2758
                    <div class="small">kcal</div>
                </div>
                <svg>
                    <circle class="bg" cx="57" cy="57" r="52" />
                    <circle class="progress" cx="57" cy="57" r="52" />
                </svg>
            </div>
            <div class="circles-small">
                <div class="circle-small">
                    <div class="text">
                        8563
                        <div class="small">steps</div>
                    </div>
                    <svg>
                        <circle class="bg" cx="40" cy="40" r="37" />
                        <circle class="progress one" cx="40" cy="40" r="37" />
                    </svg>
                </div>
                <div class="circle-small">
                    <div class="text">
                        6,2
                        <div class="small">km</div>
                    </div>
                    <svg>
                        <circle class="bg" cx="40" cy="40" r="37" />
                        <circle class="progress two" cx="40" cy="40" r="37" />
                    </svg>
                </div>
            </div>
        </div>
    </div>
</body>
</html>